<script setup>
import { ref, onMounted } from 'vue'
import { friendCircle } from '@/api/article'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()
const posts = ref([])
const loading = ref(false)
const refreshing = ref(false)

const loadPosts = async () => {
  try {
    loading.value = true
    const res = await friendCircle()
    posts.value = res.data.list
  } catch (error) {
    showToast('获取朋友圈失败')
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

const onRefresh = () => {
  refreshing.value = true
  loadPosts()
}

onMounted(() => {
  loadPosts()
})
</script>

<template>
  <div class="friend-circle">
    <van-nav-bar 
      title="朋友圈" 
      left-arrow 
      @click-left="$router.back()" 
    />
    
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div class="content">
        <van-skeleton title avatar :row="3" :loading="loading" v-if="loading" />
        
        <div v-else class="post-list">
          <div 
            v-for="post in posts" 
            :key="post.id" 
            class="post-card"
            @click="router.push(`/article/${post.id}`)"
          >
            <div class="post-header">
              <img :src="post.userInfo.avatar" class="avatar" />
              <div class="user-info">
                <div class="username">{{ post.userInfo.username }}</div>
                <div class="time">{{ post.createTime }}</div>
              </div>
            </div>
            
            <div class="post-content">
              <h3 class="title">{{ post.title }}</h3>
              <p class="text">{{ post.content }}</p>
            </div>
            
            <div class="image-grid" v-if="post.imagesList.length">
              <img 
                v-for="(img, index) in post.imagesList.slice(0, 9)" 
                :key="index" 
                :src="img" 
                class="grid-image"
              />
            </div>
            
            <div class="tags" v-if="post.tagList.length">
              <span 
                v-for="tag in post.tagList" 
                :key="tag" 
                class="tag"
              >
                {{ tag }}
              </span>
            </div>
            
            <div class="post-footer">
              <div class="stat-item">
                <van-icon name="eye-o" />
                <span>{{ post.view || 0 }}</span>
              </div>
              <div class="stat-item">
                <van-icon 
                  name="like" 
                  :class="{ active: post.likeStatus === 1 }" 
                />
                <span>{{ post.liked }}</span>
              </div>
              <div class="stat-item">
                <van-icon 
                  name="star" 
                  :class="{ active: post.favoriteStatus === 1 }" 
                />
                <span>{{ post.favorite }}</span>
              </div>
              <div class="stat-item">
                <van-icon name="chat-o" />
                <span>{{ post.review }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<style scoped lang="scss">
.friend-circle {
  min-height: 100vh;
  background: #f8f8f8;

  .content {
    padding: 16px;

    .post-card {
      background: #fff;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      transform: translateY(0);
      transition: all 0.3s ease;
      animation: slideUp 0.5s ease-out;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      }

      .post-header {
        display: flex;
        align-items: center;
        margin-bottom: 12px;

        .avatar {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          margin-right: 12px;
          border: 2px solid #fff;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .user-info {
          .username {
            font-weight: 500;
            font-size: 16px;
            color: #333;
          }

          .time {
            font-size: 12px;
            color: #999;
            margin-top: 2px;
          }
        }
      }

      .post-content {
        .title {
          font-size: 18px;
          font-weight: 600;
          color: #333;
          margin-bottom: 8px;
        }

        .text {
          font-size: 14px;
          color: #666;
          line-height: 1.6;
          margin-bottom: 12px;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }

      .image-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        margin-bottom: 12px;

        .grid-image {
          width: 100%;
          height: 100px;
          object-fit: cover;
          border-radius: 4px;
          transition: transform 0.3s ease;

          &:hover {
            transform: scale(1.02);
          }
        }
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;

        .tag {
          background: #f0f2f5;
          color: #666;
          padding: 4px 12px;
          border-radius: 16px;
          font-size: 12px;
          transition: all 0.3s ease;

          &:hover {
            background: #e4e6e9;
            transform: translateY(-1px);
          }
        }
      }

      .post-footer {
        display: flex;
        justify-content: space-around;
        border-top: 1px solid #f0f2f5;
        padding-top: 12px;

        .stat-item {
          display: flex;
          align-items: center;
          gap: 4px;
          color: #666;
          font-size: 14px;

          .van-icon {
            font-size: 16px;
            transition: all 0.3s ease;

            &.active {
              color: #ff6b6b;
              transform: scale(1.1);
            }
          }
        }
      }
    }
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 